<template>
    <div class="lineTem">
        <h3>{{title}}</h3>
        <div id="lineChartTem" class="lineChartTem">

        </div>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    watch:{
        pageType(newval){
            if(this.pageType=='wind-city'){
                this.title = '温州市(58659)过去24小时极大风|m/s'
            }else if(this.pageType=='wind-county'){
                this.title = '永嘉县(58659)过去24小时极大风|m/s'
            }
        }
    },
    data(){
        return{
            title:'',
            options:{
                tooltip: {
                    trigger: 'axis',
                   formatter:(params)=>{
                       console.log(params)
                       return params[0].name+'时 : '+params[0].value+'m/s'
                   }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    top:'10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show:false,
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#0A3857',
                        }
                    },
                    axisLabel:{
                        color:'#83C3E9'
                    },
                    data: []
                },
                yAxis: {
                    type: 'value',
                        axisLine:{
                            lineStyle:{
                                color:'#0A3857',
                            }
                        },
                        axisTick: {
                            show:false,
                        },
                        axisLabel:{
                            color:'#83C3E9'
                        },
                        splitLine:{
                            lineStyle:{
                                color:'#0A3857',
                            }
                        }
                },
                series: [{
                    data: [2.5,2.1,1.8,1.6,1.7,1.3,1.2,1.8,1.4,2.6,1.8,2.1,2.5,2.7,2.4,2.1,1.9,1.7,2.1,1.5,1.5,1.4,1.2,1.1],
                    type: 'line',
                    symbol:'none',
                     emphasis:{
                        label:{
                            show:false,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              { offset: 0, color: "#04771E" },
                              { offset: 1, color: "rgba(4, 119, 30,.1)" }
                            ])
                        }
                    },
                    lineStyle:{
                        normal:{color:'#73E7AE'},
                    },
                    markPoint: {
                        symbol: "circle", 
                        symbolSize: 6,
                        label:{
                            position:'top',
                            color:'#A9F1A6',
                            rich:{
                                min:{
                                    color:'#A7F3B5'
                                }
                            },
                            formatter:(val=>{
                                return val.value+'m/s'
                            })
                        },
                        itemStyle:{
                            color:'#0E5F0D',
                            borderColor: '#DEFF84',
                            borderWidth: 1,
                            borderType: 'solid',
                        },
                        data: [
                            {type: 'max', name: '最大值'}
                        ]
                    },
                    smooth:true,
                }]
            }
        }
    },
    methods:{
        group(array, subGroupLength) {
            let index = 0;
            let newArray = [];
            while(index < array.length) {
                newArray.push(array.slice(index, index += subGroupLength));
            }
            return newArray;
        },
        getTime(){
            let time = new Date().getHours()
            let timeArr = Array.from({length: 24}, (v, i) => (i+'').padStart(2,'0'));
            let end = timeArr.splice(time+1,23)
            return end.concat(timeArr)
        },
        initCharts(){
            this.options.xAxis.data = this.getTime()
            let lineChartTem = document.getElementById('lineChartTem')
            let fsize = document.body.clientWidth/1920*16
            lineChartTem.style.height = document.body.clientWidth<=1920? fsize*15+'px':'15rem'
            var myChart = this.$echarts.init(lineChartTem); 
            myChart.setOption(this.options)
        }
    },
    created(){
        if(this.pageType=='wind-city'){
            this.title = '温州市(58659)过去24小时极大风|m/s'
        }else if(this.pageType=='wind-county'){
            this.title = '永嘉县(58659)过去24小时极大风|m/s'
        }
    },
    mounted(){
        this.initCharts()
        this.getTime()
    }
}
</script>
<style lang="scss" scoped>
    .lineTem{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        position: relative;
        h3{
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:center;
            height:2.3rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
            width:25rem;
        }
        .lineChartTem{ 
            // height:15rem;
            margin-top:.5rem;
            background: linear-gradient( rgba(4, 15, 50,.2), rgba(4, 15, 50,.8),rgba(4, 15, 50,.2));
        }
    }
</style>